//随机数字
@function parse-random($value) {
  @return round(random() * $value);
}
$randomId: parse-random(1000000);

$spriteSrc: "{{{spritesheet.image}}}";
$spriteWidth: {{{spritesheet.width}}}px;
$spriteHeight: {{{spritesheet.height}}}px;
{{#items}}
${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};
{{/items}}

@function px2rem ($px) {
  @if (type-of($px) == "number") {
    @return $px / 75px * 1rem;
  }
  @if (type-of($px) == "list") {
    @if (nth($px, 1) == 0 and nth($px, 2) != 0) {
      @return 0 nth($px, 2) / 75px * 1rem;
    } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {
      @return 0 0;
    } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {
      @return nth($px, 1) / 75px * 1rem 0;
    } @else {
      @return nth($px, 1) / 75px *1rem nth($px, 2) / 75px * 1rem;
    }
  }
}

@function strip-units($number){
  @return $number / ($number * 0 + 1);
}

@function format-zero($number){
    @if $number == 0 {
        @return 1;
    }@else{
        @return $number;
    }
}

@mixin sprite-width($sprite, $precision) {
    @if $precision {
        width: px2rem(nth($sprite, 3));
    }@else{
        width: px2rem(nth($sprite, 3) + 2px);
    }

}

@mixin sprite-height($sprite, $precision) {
    @if $precision {
        height: px2rem(nth($sprite, 4));
    }@else{
        height: px2rem(nth($sprite, 4) + 2px);
    }
}

@mixin sprite-position($sprite, $precision) {
    @if $precision {
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) - $spriteHeight)) * 100%;
    }@else{
        background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) + 1 - $spriteWidth) * 100%  strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) + 1 - $spriteHeight)) * 100%;
    }
}

@mixin sprite($sprite, $precision) {
    @include sprite-position($sprite, $precision);
    @include sprite-width($sprite, $precision);
    @include sprite-height($sprite, $precision);
  background-image: url('#{$spriteSrc}');
    background-repeat: no-repeat;
    background-size: px2rem(($spriteWidth, $spriteHeight));
  display: inline-block;
}

{{#sprite}}
    {{class}} {
    background-repeat: no-repeat;
    overflow: hidden;
    border: none;
    background: url('#{$spriteSrc}');
    @include inline-block();
    vertical-align: middle;
    font-style: normal;
    color:$icon-font-color;
    }
{{/sprite}}

{{#items}}
@mixin mix-{{name}}() {
    @include sprite(${{name}}, $precision: false);
}
{{/items}}